<template>
    <div id="classify">
      <div class="nav">
          <van-search placeholder="会员日" class="input" shape="round" />
          <van-icon name="chat-o" size=".5rem" class="icon"/>
      </div>
      <div class="list">
         <ul class="left">
            <li v-for="(item,index) in arrs" :class="{active:item.componentId===componentId}" :key="index" @click="componentId= item.componentId">
                    {{item.name}}
            </li>
         </ul>
          <keep-alive>
            <component :is="componentId"></component>
        </keep-alive>
      </div>
    </div>
</template>

<script>
import Num1 from "../components/Kind/Num1.vue";
import Num2 from "../components/Kind/Num2.vue";
import Num3 from "../components/Kind/Num3.vue";
import Num4 from "../components/Kind/Num4.vue";
import Num5 from "../components/Kind/Num5.vue";
import Num6 from "../components/Kind/Num6.vue";
import Num7 from "../components/Kind/Num7.vue";
import Num8 from "../components/Kind/Num8.vue";
import Num9 from "../components/Kind/Num9.vue";
import Num10 from "../components/Kind/Num10.vue";
import Num11 from "../components/Kind/Num11.vue";
import Num12 from "../components/Kind/Num12.vue";

export default {
    name:"Classify",
    data(){
        return{
            componentId:'Num1',
            flag :false,
            arrs:[
                {
                    name:"新品",
                    componentId:"Num1",
                    id:1
                },
                 {
                    name:"手机",
                    componentId:"Num2",
                    id:2
                },
                 {
                    name:"智慧屏",
                    componentId:"Num3",
                    id:3
                },
                {
                    name:"智能穿戴",
                    componentId:"Num4",
                    id:4
                },
                 {
                    name:"耳机音像",
                    componentId:"Num5",
                    id:5
                },
                 {
                    name:"智能路由",
                    componentId:"Num6",
                    id:6
                },
                {
                    name:"平板",
                    componentId:"Num7",
                    id:7
                },
                 {
                    name:"电脑办公",
                    componentId:"Num8",
                    id:8
                },
                 {
                    name:"生态产品",
                    componentId:"Num9",
                    id:9
                },
                {
                    name:"家用电器",
                    componentId:"Num10",
                    id:10
                },
                 {
                    name:"智能家居",
                    componentId:"Num11",
                    id:11
                },
                 {
                    name:"甄选美酒",
                    componentId:"Num12",
                    id:12
                }
            ]
        }
    },
     components: {
      Num1,
      Num2,
      Num3,
      Num4,
      Num5,
      Num6,
      Num7,
      Num8,
      Num9,
      Num10,
      Num11,
      Num12,
  },
}
</script>

<style scoped>
*{
    margin:0;
    padding: 0;
}
#classify{
    width: 7.5rem;
    background: #fff;
}
ul,li{
    list-style: none;
}
.list{
    display: flex;
    padding-top: 1.4rem;
}
.list .left{
    width: 2rem;
    height:100vw;
    overflow: hidden;
    overflow: scroll;
}
.list .left li{
    padding:.3rem;
    text-align: center;
    margin:0 .05rem;
    font-size:.2rem;
}
.active{
    color: #e01d20;
    border-right: .01rem solid #e01d20;
}
.nav{
    width: 100%;
    background: #fff;
    height: 1.2rem;
    display: flex;
    position: fixed;
    z-index: 999;
}
.nav .input{
    margin-top: .4rem !important;
    margin-left: .2rem !important;
    width: 6.2rem !important;
    height: .4rem !important;
}
.icon{
    margin-top: .28rem;
    margin-left: .3rem;
}
::-webkit-scrollbar{
  display: none;
}
</style>